<template>
	<view class="container">
		<view class="btn-finish" @click="submitAddress">完成</view>

		<view class="form-card">
			<u--form labelPosition="left" :model="address" ref="uForm" labelWidth="130rpx"
				:labelStyle="{fontSize:'32rpx',color:'#333333'}">
				<u-form-item label="收货人" prop="realname" borderBottom>
					<u--input v-model.trim="address.realname" placeholder="请输入收货人姓名" border="none" fontSize="32rpx"
						color='#676767'></u--input>
				</u-form-item>

				<u-form-item label="手机号码" prop="mobile" borderBottom>
					<u--input v-model.trim="address.mobile" type="number" maxLength="11" placeholder="请输入手机号码" border="none"
						fontSize="32rpx" color='#676767'></u--input>
				</u-form-item>

				<!-- 				<u-form-item label="洗姜厂" prop="factory" borderBottom>
					<u--input v-model.trim="address.factory" placeholder="请选择洗姜厂" readonly border="none" fontSize="32rpx"
						color='#676767'></u--input>
				</u-form-item>

				<u-form-item label="省市地区" prop="districtFull" borderBottom>
					<u--input v-model.trim="address.districtFull" placeholder="请选择省市地区" readonly border="none" fontSize="32rpx"
						color='#676767'></u--input>
				</u-form-item> -->


				<u-form-item label="详细地址" prop="address" borderBottom>
					<u--input v-model.trim="address.address" placeholder="请输入洗姜厂库房号" border="none" fontSize="32rpx"
						color='#676767'></u--input>
				</u-form-item>
			</u--form>
		</view>

		<template v-if="address.id">
			<view class="form-card default-card f-c-between">
				<view class="form-label">设置默认地址</view>
				<u-switch v-model="address.default" space="2" size="21" activeColor="#FFC046"
					inactiveColor="#CDCDCD"></u-switch>
			</view>

			<view class="form-card default-card" @click="showDelModal=true">
				<view class="form-label del-label">删除收货地址</view>
			</view>

		</template>

		<!-- <u-picker :show="showFactory" :columns="[factoryList]" keyName="factory" confirmColor="#FFC046"
			@confirm="confirmFactory" @cancel="showFactory=false"></u-picker> -->


		<myModal :show="showDelModal" title="删除确认" content="确定要删除该收货地址吗？" @cancel="showDelModal=false"
			@confirm="confirmDelBtn">
		</myModal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				address: {
					id: null,
					realname: '',
					mobile: '',
					// factory: '',
					// province: '',
					// city: '',
					// distinct: '',
					address: '',
					default: false,
				},
				showDelModal: false,
				disableSubmit: false, //提交按钮是否禁用
			};
		},
		computed: {},
		onLoad({
			id
		}) {
			this.address.id = id
			// this.getFactoryInfo()
			if (id) {
				this.getAddressInfo()
			}
		},
		methods: {
			//获取姜厂信息
			getFactoryInfo() {
				this.$api.get_address_factory().then(res => {
					this.address = {
						...this.address,
						...res,
						districtFull: `${res.province}${res.city}${res.distinct}`
					}
				})
			},

			//获取地址信息
			getAddressInfo() {
				this.$api.get_address_list().then(res => {
					let address = (res || []).find(v => v.id == this.address.id)
					if (address) {
						delete address.deletetime
						this.address = {
							...address,
							districtFull: `${address.province}${address.city}${address.distinct}`,
							default: address.default == 1 ? true : false
						}
					}
				})
			},

			// 改变工厂弹框显示
			showFactoryPicker() {
				this.showFactory = !this.showFactory
				uni.hideKeyboard()
			},

			//工厂选择框
			confirmFactory(e) {
				let item = e.value[0]
				this.showFactory = false
				this.address = {
					...this.address,
					...item,
					districtFull: `${item.province}${item.city}${item.distinct}`
				}
			},

			//保存地址
			submitAddress() {
				//重复提交拦截
				if (this.disableSubmit) {
					return
				}
				if (!this.address.realname.trim()) {
					this.$showToast('请输入收货人')
					return
				}
				if (!this.$util.businessUtil.checkPhoneBool(this.address.mobile)) {
					return
				}
				// if (!this.address.factory.trim()) {
				// 	this.$showToast('请选择洗姜厂')
				// 	return
				// }
				if (!this.address.address.trim()) {
					this.$showToast('请输入详细地址')
					return
				}
				let params = {
					...this.address,
					default: this.address.default ? 1 : 0
				}
				delete params.districtFull

				let _api = this.address.id ? 'save_address_edit' : 'save_address_add'
				this.disableSubmit = true
				this.$api[_api](params).then(res => {
					this.$showToast('操作成功')
					setTimeout(() => {
						this.disableSubmit = false
						uni.navigateBack()
					}, 800)
				}).catch(err => {
					this.disableSubmit = false
				})
			},

			//确认删除
			confirmDelBtn() {
				this.$api.post_address_del({
					id: this.address.id
				}).then(res => {
					this.$showToast('删除成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				})
			}
		},
	}
</script>


<style>
	page {
		background: #F4F7F7;
	}
</style>
<style lang="scss" scoped>
	.btn-finish {
		font-weight: 500;
		font-size: 32rpx;
		color: #666666;
		padding: 32rpx 32rpx 22rpx;
		text-align: right;
	}

	.form-card {
		background: #FFFFFF;
		box-shadow: 0px 0px 18rpx 0px rgba(0, 0, 0, 0.11);
		padding: 0 46rpx;
	}

	.default-card {
		height: 90rpx;
		line-height: 90rpx;
		margin-top: 28rpx;

		.form-label {
			font-weight: 400;
			font-size: 32rpx;
			color: #333333;
		}

		.del-label {
			color: #FFC046;
		}
	}
</style>